<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件监听器</title>
		<script type="text/javascript">
			// var     /vɑr/
			// alert   /əˈlɜːrt/
			// click        /klɪk/
			// addEventListener    /æd  ɪˈvent  lɪsənər/
			// removeEventListener  /rɪˈmuːv  ɪˈvent  lɪsənər/
			// attachEvent    /əˈtætʃ   ɪˈvent/
			// detachEvent    /dɪˈtætʃ  ɪˈvent/
			
		
			/*
				传统事件绑定：
					1、重复添加事件会将原有的事件覆盖
					2、默认事件冒泡
					
				事件监听器：
					其实就是另一种事件绑定方式
					1、可以添加多个事件函数而不被覆盖
					2、可以选择事件冒泡或事件捕获
					3、可以精确移除某个事件函数
					
					//【注意】IE8一下浏览器不支持下面的函数
					//添加事件
					addEventListener();
						格式：node.addEventListener(事件类型, 事件函数, 布尔值);
						参数：
							参数1：事件的类型，如click,【注】不要+on
							参数2：事件函数
							参数3：布尔值，true表示事件捕获 ，false表示事件冒泡， 默认是冒泡
					//删除事件
					removeEventListener();
						格式：node.removeEventListener(事件类型, 事件函数名);
						参数：
							参数1：事件的类型，如click,【注】不要+on
							参数2：要删除的事件函数名
							
							
					//【注意】IE8低版本的支持下面的函数
					//添加事件
					attachEvent();
						格式：node.attachEvent(事件类型，事件函数);
						参数：
							参数1：事件类型，如onclick ，【注】一定要+on
							参数2：事件函数
					//删除事件
					detachEvent();
						格式：node.detachEvent(事件类型, 事件函数名);
						参数：
							参数1：事件的类型，如onclick,【注】一定要+on
							参数2：要删除的事件函数名
			*/
			
			
			/***********传统的事件绑定***********/
			// window.onload = function(){
			// 	var Obtn = document.getElementById("btn");
				
			// 	Obtn.onclick = function(){
			// 		alert("函数1");
			// 	}
			// 	//重复添加事件会将原有的事件覆盖
			// 	Obtn.onclick = function(){
			// 		alert("函数2");
			// 	}
			// }
		
			/***********使用事件监听器***********/
			window.onload = function(){
				var Obtn = document.getElementsByTagName("button");
				
				Obtn[1].addEventListener("click", function(){
					alert("原来的函数");
				}, false);
				
				Obtn[0].onclick = function(){
					// Obtn[1].addEventListener("click", show, false);
					
					addEvent(Obtn[1], "click", show);
				}
				
				Obtn[2].onclick = function(){
					// Obtn[1].removeEventListener("click", show);
					
					removeEvent(Obtn[1], "click", show);
				}
			}
			
			function show(){
				alert("新函数");
			}
			
			
			
			
			
			
			//事件监听器兼容函数
			//添加事件
			function addEvent(node, eventType, funcName){
				if(node.addEventListener){
					node.addEventListener(eventType, funcName, false);
				}
				else{
					node.attachEvent("on"+eventType, funcName);
				}
			}
			
			//删除事件
			function removeEvent(node, eventType, funcName){
				if(node.removeEventListener){
					node.removeEventListener(eventType, funcName);
				}
				else{
					node.detachEvent("on"+eventType, funcName);
				}
			}
		</script>
	</head>
	<body>
		<button>添加函数</button>
		<button id="btn">按钮</button>
		<button>删除函数</button>
	</body>
</html>
